<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1">
		<link rel = "stylesheet" type = "text/css" href = "css/event.css" />
		<script type = "text/javascript" src = "js/jquery-1.3.1.min.js"></script>
		<script type = "text/javascript">
			$(document).ready(function() {		
				//Execute the slideShow
				slideShow();
			});

			function slideShow() {

				//Set the opacity of all images to 0
				$('#gallery a').css({opacity: 0.0});
				
				//Get the first image and display it (set it to full opacity)
				$('#gallery a:first').css({opacity: 1.0});
				
				//Set the caption background to semi-transparent
				$('#gallery .caption').css({opacity: 0.7});

				//Resize the width of the caption according to the image width
				$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
				
				//Get the caption of the first image from REL attribute and display it
				$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
				.animate({opacity: 0.7}, 400);
				
				//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
				setInterval('gallery()',6000);
				
			}

			function gallery() {
				
				//if no IMGs have the show class, grab the first image
				var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

				//Get next image, if it reached the end of the slideshow, rotate it back to the first image
				var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
				
				//Get next image caption
				var caption = next.find('img').attr('rel');	
				
				//Set the fade in effect for the next image, show class has higher z-index
				next.css({opacity: 0.0})
				.addClass('show')
				.animate({opacity: 1.0}, 1000);

				//Hide the current image
				current.animate({opacity: 0.0}, 1000)
				.removeClass('show');
				
				//Set the opacity to 0 and height to 1px
				$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
				
				//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
				$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
				
				//Display the content
				$('#gallery .content').html(caption);

			}

		</script>
	</head>
	<body>
		<h3>MetaCube Updates</h3>
		<!-- this page used in home page.. it contains images of events.. -->
		<div id="gallery">

			<a href="#" class="show">
				<img src="images/dandiya.jpg" alt="Flowing Rock" width="280px" height="250" title="" alt="" rel="<h3>Dandiya Night</h3>Dandiya Party on 20th OCT 2012.Enjoy this Navratara with MetaPeople"/>
			</a>
			
			<a href="#">
				<img src="images/cloud.jpg" alt="Grass Blades" width="280px" height="300" title="" alt="" rel="<h3>Badminton Updates</h3>Cloudy Rathores beat javabeans in a legue match on this friday.party at TGB"/>
			</a>
			
			<a href="#">
				<img src="images/dance.jpg" alt="Ladybug" width="280px" height="300" title="" alt="" rel="<h3>Dance Competition</h3>Register Your names for dance competition with your respective coordinators"/>
			</a>
			
			<div class="caption"><div class="content"></div></div>
		</div>
	</body>
</html>